<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>8.Vue.set的使用</title>
    <script src="../js/vue.min.js"></script>
</head>

<body>
    <div id="root">
        <h1>公司信息</h1>
        <h2>公司名称：{{name}}</h2>
        <h2>公司地址：{{address}}</h2>
        <hr>
        <h1>学生信息</h1>
        <button @click="addSex">添加一个性别,默认值是男</button>
        <h2>学生名字：{{student.name}}</h2>
        <h2 v-show="student.sex">学生性别：{{student.sex}}</h2>
        <h2>学生年龄：对外年龄{{student.age.sAge}}---真实年龄{{student.age.rAge}}</h2>
        <hr>
        <h2>朋友们</h2>
        <ul>
            <li v-for="(friend,index) in student.friends" :key="index">朋友的名称:{{friend.name}}--朋友的年龄:{{friend.age}}</li>
        </ul>


        <script type="text/javascript">
            //  用 computed 实现
            const vm = new Vue({
                el: '#root',
                data() {
                    return {
                        name: '奇瑞',
                        address: '花园大道',
                        student: {
                            name: 'bujunjie',
                            age: {
                                rAge: 20,
                                sAge: 18
                            },
                            friends: [
                                { id: '001', name: '张三', age: 18 },
                                { id: '002', name: '李四', age: 20 },
                            ]
                        },

                    }
                },
                methods: {
                    addSex() {
                        // 响应式增加 两种写法
                        // Vue.set(this.student, 'sex', '男');
                        this.$set(this.student, 'sex', '男');
                    }
                },

            });
        </script>

</body>

</html>